<template>
  <div class="contentCenter" style="width:739px ">
    <div class="topTitle"></div>

    <div class="kpiData">
      <div class="dataItem" v-for="item in kpiData" :key="item.label">
        <div class="name">{{ item.label }}</div>
        <div><span class="num">{{ item.value }}</span><span class="unit">{{ item.unit }}</span></div>
      </div>
    </div>

    <e-charts
      id="mycharts"
      ref="chart"
      :option="mapOption"
      autoresize
    />
  </div>
</template>
<script setup lang="ts">
import { ref,onMounted } from "vue";
import { getMapJsonFile } from "../../../utils/mapdeal";
import * as echarts from "echarts";


//以下是地图相关逻辑

// 获取地图JSON文件\
const layoutSize = ref("130%");
const layoutCenterY = ref(53);
// 纵横比例
let aspectScale = ref(1);
// 缩放比例
let zoom = ref(0.8);

// 地图实例
const chart = ref(null);
// 地图配置项
let mapOption = ref({});

// 初始化地图
function initMap(mapName:any, mapData:any) {
  // 地图配置项
  mapOption.value = {
    tooltip: {
      show: false,
      trigger: 'item',// 设置该属性之后，会与series中data数据对应。注意data中对象的键名为name。如果单纯的展示数据可用此属性，不与formatter同用。
      alwaysShowContent: false,
      seriesIndex: 0,
      borderColor: 'rgba(0, 0, 0, 0.16);',
      triggerOn: 'mousemove',
      enterable: false,
      textStyle: {
        color: '#DADADA',
        fontSize: '12',
        width: 20,
        height: 30,
        overflow: 'break'
      },
      className: 'mapTooltip',
      formatter (params:any) {
        return `<div style="height: 340px;width: 264px;display: flex; flex-direction: column;align-items: left;padding: 0 10px;">
            <div class="mapTitle"><div class="mapIcon"></div>${ params.name }</div>
            <div class="mapSmallTitle"><div class="mapOutBox"><div class="mapInlineBox"></div></div> 公安机关 </div>
            <div style="margin:10px 0 5px 0"><span style="color:#CCCCCC">派出所：</span> 20个 </div>
            <div class="mapSmallTitle"><div class="mapOutBox"><div class="mapInlineBox"></div></div> 政府机关 </div>
            <div style="margin:10px 0 5px 0"><span style="color:#CCCCCC">乡、镇总数：</span> 12个 </div>
            <div style="margin:10px 0 5px 0"><span style="color:#CCCCCC">村、社区总数：</span> 122个 </div>
            <div>  </div>
            <div style="margin:25px 0 5px 0"> 合作体检机构总数：122个 </div>
            <div style="margin:10px 0 5px 0"> 协助拘留所总数：22个 </div>
          </div>`
      },
    },
    // visualMap: {
    //   type: "piecewise",
    //   seriesIndex: 0,
    //   min: 0,
    //   max: 100,
    //   left: 28,
    //   bottom: 20,
    //   align: "left",
    //   // seriesIndex: 0,
    //   itemWidth: 10,
    //   itemHeight: 10,
    //   textStyle: {
    //     color: "#FFFF",
    //   },
    //   selectedMode: false,
    //   inverse: true,
    //   pieces: [
    //     {
    //       gte: 1,
    //       lte: 5,
    //       color: "rgb(5, 98, 115)",
    //       label: "1-5名",
    //     }, // 大于等于0小于等于30
    //     {
    //       gte: 6,
    //       lte: 12,
    //       color: "rgb(4, 61, 122)",
    //       label: "6-12名",
    //     }, // 大于等于30小于等于50
    //     {
    //       gte: 13,
    //       lte: 25,
    //       color: "rgb(105, 102, 63)",
    //       label: "13-25名",
    //     }, // 大于等于50小于等于70
    //     {
    //       gte: 26,
    //       lte: 35,
    //       color: "rgb(119, 82, 57)",
    //       label: "26-35名",
    //     }, // 大于等于70小于等于90
    //     {
    //       gte: 36,
    //       lte: 41,
    //       color: "rgb(108, 25, 74)",
    //       label: "36-41名",
    //     }, // 大于等于90小于等于100
    //   ],
    // },
    geo: [
      {
        map: mapName,
        zoom: zoom.value,
        aspectScale: aspectScale.value,
        layoutCenter: ["50%", `${layoutCenterY.value}%`],
        layoutSize: layoutSize.value,
        animationDurationUpdate: 0,
        label: {
          show: false,
          color: "#fff",
          fontSize: 14,
          formatter: function (params:any) {
            return params.name.slice(0, 2);
          },
        },
        itemStyle: {
          borderWidth: 1, //设置外层边框
          // borderColor: 'rgba(255,255,255,0.6)',
          borderColor: "#2ddcfd", //地图交界线颜色
          areaColor: "#1E4CA2", //地图背景色
        },
        // 不显示tooltip
        tooltip: {
          show: false,
        },
        // 去掉鼠标放上的效果
        emphasis: {
          label: {
            show: false,
          },
          itemStyle: {
            areaColor: "transparent",
          },
        },
        // 主城区默认不显示label
        // regions: mapNameList.map((item) => ({
        //   name: item.name,
        //   label: {
        //     show: cqMainArea.value.includes(item.name) ? false : true,
        //   },
        //   itemStyle: {
        //     // areaColor: item.color,
        //     areaColor: getLevelColor(item.value),
        //   },
        // })),
      },
      {
        type: "map",
        map: mapName,
        aspectScale: aspectScale.value,
        zlevel: -1,
        // aspectScale: 1,
        zoom: zoom.value,
        layoutCenter: ["50%", `${layoutCenterY.value+2}%`],
        layoutSize: layoutSize.value,
        silent:true,
        //立体效果
        itemStyle: {
          areaColor: 'transparent',
          borderColor: 'rgba(0, 0, 187, 1)',
          borderWidth: 3,
          shadowColor: '#0f4c74',
          shadowOffsetY: 8,
          shadowBlur: 10
        }
        //发光重影效果
        // label: {
        //   show: false,
        //   fontSize: 10,
        //   color: "#605e5e",
        // },
        // emphasis: {
        //   label: {
        //     show: true,
        //     fontSize: 10, // 选中地图文字字号和字体颜色
        //     color: "#605e5e",
        //   },
        // },
        // itemStyle: {
        //   // normal: {
        //   // shadowColor: "#145D9C",
        //   // shadowColor: '#1164b4',
        //   shadowColor: "#1970C1",
        //   shadowBlur: 10,
        //   shadowOffsetY: 8,
        //   // },
        // },
      },
    ],
    series: [
      {
        type: "map",
        map: mapName,
        zoom: zoom.value,
        z: 2,
        aspectScale: aspectScale.value,
        animationDurationUpdate: 0,
        showLegendSymbol: true,
        label: {
          show: true,
          color: "#fff",
          fontSize: "14px",
        },
        itemStyle: {
          // areaColor: 'rgba(0, 0, 0, .1)',
          areaColor: "transparent",
          borderColor: "#13b4e0",
          borderWidth: 0.2,
        },
        emphasis: {
          itemStyle: {
            show: false,
            color: "#fff",
            // areaColor: "rgba(0,254,233,0.7)",
            areaColor: "rgba(40, 158, 111, 0.7)",
          },
          label: {
            show: true,
            color: "#fff",
          },
        },
        // 取消选中后的高亮状态和文字显示
        select: {
          itemStyle: {
            areaColor: "transparent",
          },
          label: {
            show: true,
            color: "#fff",
          },
        },

        layoutCenter: ["50%", `${layoutCenterY.value}%`],
        layoutSize: layoutSize.value,
        markPoint: {
          symbol: "none",
        },
      },
      {
        type: "lines",
        color: "#fff",
        opacity: 1,
        zlevel: 0,

        label: {
          show: true,
          color: "#fff",
          opacity: 1,
          fontSize: 12,
          backgroundColor: "#0992f0",
          padding: [2, 8],
          borderRadius: 4,
          align: "center",
          height: 20,
          // 垂直居中
          verticalAlign: "middle",
        },
        tooltip: {
          show: true,
        },
        lineStyle: {
          show: true,
          type: [3, 5],
          dashOffset: 5, // 尾迹线条的长度
          width: 2, //尾迹线条宽度
          opacity: 1, //尾迹线条透明度
          curveness: 0, //尾迹线条曲直度
          color: "#37F6E0", // 飞线颜色转载请附上原文出处链接及本声明。
        },
        data: [
        ],
      },
    ],
  };
  echarts.registerMap(mapName, mapData);
}
onMounted(async () => {
  const file = await getMapJsonFile('忠县');
  initMap("chongqing", file);
});

const kpiData = ref([
  {
    label:'人民监督员参与履职案件数',
    value:25,
    unit:'件'
  },
  {
    label:'人民监督员意见提出次数',
    value:25,
    unit:'次'
  },
  {
    label:'人民监督员意见采纳率',
    value:80,
    unit:'%'
  },
  {
    label:'人民监督员累计培训次数',
    value:999,
    unit:'次'
  },
  {
    label:'不符合条件的监督员数量',
    value:25,
    unit:'人'
  },
  {
    label:'优秀人民监督员的数量',
    value:25,
    unit:'人'
  },
  {
    label:'十种监督方式的完成率',
    value:100,
    unit:'%'
  },
  {
    label:'人民监督员报名数量',
    value:999,
    unit:'人'
  }
])
</script>

<style lang="less" scoped>
.contentCenter{
  display:flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.topTitle{
  margin-top:17px;
  width:236px;
  height:22px;
  background: url('../../../assets/centerTopTitle.png')no-repeat center/100% 100%;
}
.kpiData{
  width:100%;
  height:260px;
  background: url('../../../assets/kpiDataBg.png')no-repeat center/100% 100%;
  display:grid;
  grid-template-columns: repeat(2, 1fr); /* 重复两次，每列宽度为 1fr */
  justify-items: center;
  align-items: center;
  align-content: space-evenly;

  .dataItem{
    display:flex;
    align-items:center;
    justify-content:space-between;
    box-sizing: border-box;
    padding: 0 10px;
    width:342px;
    height:38px;
    background: url('../../../assets/kpiItemBg.png')no-repeat center/100% 100%;

    .name{
      font-weight: 400;
      font-size: 12px;
      color: #FFFFFF;
    }

    .num{
      font-weight: 700;
      font-size: 16px;
      background: linear-gradient(180deg, #ffffff 0%, #FF7734 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
    }

    .unit{
      font-weight: 600;
      font-size: 12px;
      color: #FFFFFF;
    }
  }
}

#mycharts {
  width: 750px;
  height: 650px;
}
</style>
